<template>
	<view class="">
		
	
	<view class="content">
		<view class="phone_login">
			手机验证登录
		</view>
		<text>为了方便取得联系，请输入您的常用手机号</text>
		<view class="input_phone">
			<input type="text" v-model="phone" placeholder="请输入手机号" />
			<input type="text" v-model="smsCode" placeholder="请输入验证码" />
			<button :disabled="flag" @click="sendSMSCode" class="yzm">
				{{hqyzm}}
			</button>
		</view>

		<button   @click="toLogin" class="btn" type="default"  :disabled="jyan" :loading="jyan">登录</button>
		
	</view>
	<view class="xieyi" style="position: relative;">
		<uni-forms ref="form" class="qcfd">
		<uni-group style="margin-top: -10rpx;" class="fl">
			<uni-data-checkbox @fjff='fjff'  :dtys="mal" :yanshe="fff" multiple v-model="formData.hobby" :localdata="hobby">
			</uni-data-checkbox>
			
		</uni-group>
		<view class="fl"
			>
			<text @click="djagree" >已阅读并同意</text><text style="color: #277BF9 ;"  @click="djxy">《个人信息保护及隐私政策》</text>
			<text>和</text><text style="color: #277BF9 ;"  @click="djxys">《软件使用协议》</text>
		</view>
		</uni-forms>
		
	</view>
	</view>
</template>

<script>
		import requestUrl from '@/index.js'
	import {
		mapMutations,mapState
	} from 'vuex';
	
	export default {
		computed: {
			...mapState(['market', 'userInfo'])
		},
		data() {
			return {
				phone: '',
				smsCode: '',
				hqyzm:'获取验证码',
				timer:'',
				counter:60,
				flag:false,
				marketId:'',
				hobby: [{
					
					value: 1
				}],
				formData: {
					value: 1,
					hobby: []
				},
				mal:'',
				jyan:false
			}
		},
		async onShow(){
			console.log(uni.getStorageSync('userInfo').marketId)
			this.marketId = this.market.id ||uni.getStorageSync('userInfo')
			this.fff='#ffffff'
			if (uni.getStorageSync('agrees')) {
				this.formData.hobby.push(uni.getStorageSync('agrees'))
			}
		},
		
		onLoad() {
			this.mal='dtys'
		},
		methods: {
			...mapMutations(['login', 'logout']),
			djagree(){
				if(this.formData.hobby.length>0){
					this.formData.hobby=[]
					
				}else {
					this.formData.hobby.push(1)
					uni.setStorageSync('agrees', 1)
				}
			},
			fjff(){
				if(this.formData.hobby.length>0){
					this.formData.hobby=[]
					
				}else {
					this.formData.hobby.push(1)
					uni.setStorageSync('agrees', 1)
				}
			},
			djxy(){
				uni.navigateTo({
					url:"../screat/screat"
				})
			},
			djxys(){
				uni.navigateTo({
					url:"../xieyi/xieyi"
				})
			},
			async sendSMSCode() {
				let phonereg=11&&/^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
				if(!this.phone||!phonereg.test(this.phone)){
					this.$api.msg('请输入正确的手机号！')
					return
				}else{
					this.$api.msg('验证码已发送')
				}
				this.flag=true
				this.dsq()
				this.timer=setInterval(()=>{
					if(this.counter===0){
						this.timer&&this.clearDsq()
					}else{
						this.dsq()
					}
				},1000)
				
				let res = await this.$request.post(this.$requestUrl.GET_SMS_CODE_URL, {
					data: {
						phoneNumber: this.phone,
					}
				});
				
				this.$api.msg(res || '系统繁忙，请稍后重试')
			},
			async toLogin() {
				if(!this.phone || !this.smsCode){
					this.$api.msg('手机号和验证码不能为空！')
					return
				} else if(this.formData.hobby.length==0){
					return this.$api.msg('请阅读并同意下方协议！')
				} else if(!this.marketId){
				return	uni.showModal({
						title: '提示',
						content: '请选择所处市场',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '../pfsc/pfsc'
								});
							} else if (res.cancel) {
								
							}
						}
					});
				}
				
				this.jyan=true
				
				try{
					var resz = await this.$request.post(this.$requestUrl.LOGIN_URL, {
						data: {
							phoneNumber: this.phone,
							code: this.smsCode,
							openid: uni.getStorageSync('openid')||uni.getStorageSync('userInfo').mappingId,
							marketId: this.marketId
						}
					});
				}catch(e){
					this.jyan=false
					return this.$api.msg('网络错误，请重试')
				}
				
				if (resz && resz.token && resz.userInfo) {
					this.login(resz);
					uni.switchTab({
						url:'../index/index'
					})
					uni.setStorageSync("needLogin", false);
					this.jyan=false
				}else{
					this.$api.msg(resz.msg)
					this.jyan=false
				}
			},
			dsq(){
				this.counter-=1
				this.hqyzm=this.counter+'s后重新获取'
			},
			clearDsq(){
				clearInterval(this.timer)
				this.timer=null
				this.hqyzm='获取验证码'
				this.flag=false
				this.counter=60
				
			},
			
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.content {
		padding: 112rpx 24rpx;

	}

	.phone_login {
		font-size: 44rpx;
		font-weight: 500;
		color: #2C2C2D;
		margin-bottom: 32rpx;
	}

	text {
		font-size: 24rpx;
		font-weight: 400;
		color: #2C2C2D;
	}

	.input_phone {
		position: relative;
		margin-top: 224rpx;
		padding: 0 12rpx;
	}

	.input_phone input {
		width: 656rpx;
		border-bottom: 2rpx solid #ACACAC;
		margin-bottom: 62rpx;
		padding-bottom: 24rpx;
	}

	.yzm {
		position: absolute;
		right: 35rpx;
		bottom: 24rpx;
		font-size: 26rpx;
		font-weight: 400;
		background-color: #FFFFFF;
		color: #FF690D;
		z-index: 9999;
	}
	.yzm::after {
		border: none
	}

	.xieyi {
		text-align: center;
		margin-top: 240rpx;
	}
	
	.btn{
		background-color: #FF690D !important;color: #FFFFFF !important;margin-top: 110rpx;
	}
</style>
